<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>{{$search_key}}_{{$search_key}}的专辑,{{$search_key}}的声音 - 夜读书FM!</title>
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="author" content="夜读书,夜读书FM,电台">
    <meta name="description" content="音频分享平台，随时随地，听我想听！4亿用户选择的在线音频平台。1亿多条原创有声内容覆盖有声书、儿童、相声评书、财经新闻、音乐等328类。">
    <meta name="keywords" content="夜读书,网络电台,个人电台,音频,有声书,相声,儿童,音乐,情感">
    <link rel="stylesheet" href="{{ asset('/style/css/yefm.css') }}">   
    <script src="{{ asset('/scripts/ximalaya/xmsdk.min.js') }}"></script>
    <script src="{{ asset('/scripts/ximalaya/vue.min.js') }}"></script>
</head>
<body>
@include('mobile.nav')
<div class="page search">
    @include('yefm.inc.search_key')
    <div class="list-view" id="shengyin" v-cloak>
        <div class="list-view_header">
            <div class="list-view_title">‘{{$search_key}}’相关声音(@{{rows.total_count}})</div>
        </div>
        <ul>
            <li class="resultItem" v-for="row in rows.tracks">
                <div class="itemWrapper">
                    <div class="xm-track">
                        <a :href="'{{url('yefm/ting').'/'}}' + row.subordinated_album.id + '/' +row.id"  target="_blank" class="xm-track">
                            <div class="xm-track__cover">
                                <img style="width: 100%; height: 100%;" :src="row.cover_url_middle">
                            </div>
                            <div class="xm-track__content">
                                <p class="xm-track__title ellipsis-2" style="line-height: 22px; color: rgb(64, 64, 76);">@{{row.track_title}}</p>
                                <p class="xm-track__desc"><span class="xm-track__info">听:@{{play_count(row.play_count)}}</span><span class="xm-track__info">时长:@{{duration(row.duration)}}</span></p>
                            </div>
                        </a>
                    </div>
                </div>
            </li>
        </ul>
        <div class="load-more mr-bottom" v-if="rows.current_page < rows.total_page" @click='loadMore'>点击加载更多</div>
        <div class="load-more mr-bottom" v-else>没有更多了</div>
    </div>    
@include('yefm.inc.footer')
</div> 
<script src="{{url('/scripts/ximalaya/yefmconfig.js')}}"></script>
<script>
    const xmly = new XMLY();

    // 搜索声音
    xmly.request({
        url: 'https://api.ximalaya.com/search/tracks',
        type: 'get',
        params: {
            q: '{{$search_key}}',
            calc_dimension: 1,
            contains_paid: true,
            page: 1,
            count: 20,
        }
    }).then(res => {
        new Vue({
            el: '#shengyin',
            data: {
                rows: res.data,
            },
            methods: {                
                duration: function(duration) {
                    //音频时长
                    return (duration / 60).toFixed(2);
                },
                play_count: function (play_count)  {
                    //计算播放次数
                    let count = play_count;
                    if(count >= 100000000) {
                        return (count/100000000).toFixed(2) + '亿';
                    }
                    else {
                        return (count/10000).toFixed(2) + '万';
                    }
                },
                loadMore:function(){
                    this.rows.current_page += 1;
                    xmly.request({
                        url: 'https://api.ximalaya.com/search/tracks',
                        type: 'get',
                        params: {
                            q: '{{$search_key}}',
                            calc_dimension: 1,
                            contains_paid: true,
                            page: this.rows.current_page,
                            count: 20,
                        }
                    })
                    .then(ret => {
                        console.log(ret.data);
                        //将请求回来的数据和上一次进行组合
                        for(i=0; i<ret.data.tracks.length; i++)
                        {
                            this.$set(this.rows.tracks, this.rows.tracks.length, ret.data.tracks[i]);
                        }
                    })
                    .catch(err => {
                        alert(err);
                    });
                }
            }
        });   
    });    
</script>
</body>
</html>